<template>
  <div class="login-container">
    <!-- 主要内容 -->
    <div class="content">
      <!-- 返回按钮 -->
      <div class="back-button" >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15 18L9 12L15 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <!-- 标题 -->
      <div class="title">
        <h1>请输入</h1>
        <h1>你的手机号</h1>
      </div>

      <!-- 表单 -->
      <div class="form">
        <input 
          type="tel" 
          class="phone-input" 
          placeholder="请输入手机号码" 
          v-model="phoneNumber"
        />
        
        <button class="verify-button" @click="getVerificationCode">
          获取验证码
        </button>
        
        <div class="password-login">
          <a href="#">使用密码登录</a>
        </div>
      </div>
    </div>

    <!-- 背景图案 -->
    <div class="background-image">
      <div class="handshake-image"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request'
import router from '@/router';

const phoneNumber = ref('');

// 响应式变量
const isSending = ref(false)

const getVerificationCode = async () => {
  try {
    // 验证手机号格式
    if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
      alert('请输入有效的11位手机号码');
      return;
    }
    console.log("11111111")
    const response = await request({
      url: '/login/getSms',
      method: 'post',
      data: {"phoneNumber":phoneNumber.value},
      headers: {
        'Content-Type': 'multipart/form-data' // 必须设置
      }
     
    })
    console.log(response.data.requestId)
    const requestId=response.data.requestId
    router.push("/login/verification"+"?"+"requestId="+requestId)
  } catch (error) {
    console.error('发送验证码异常:', error);
    alert('发送服务异常，请稍后重试');
  } finally {
    isSending.value = false;
  }
}
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background-color: #e8a44c;
  color: white;
  border-radius: 0 0 16px 16px;
}

.time {
  font-weight: bold;
  font-size: 16px;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.signal {
  display: flex;
  align-items: flex-end;
  height: 12px;
  gap: 1px;
}

.signal-bar {
  width: 2px;
  background-color: black;
  margin-right: 1px;
}

.signal-bar:nth-child(1) { height: 4px; }
.signal-bar:nth-child(2) { height: 6px; }
.signal-bar:nth-child(3) { height: 8px; }
.signal-bar:nth-child(4) { height: 10px; }

.network {
  font-weight: bold;
  font-size: 14px;
}

.battery {
  display: flex;
  align-items: center;
  gap: 2px;
}

.battery-level {
  font-size: 14px;
}

.battery-icon {
  width: 20px;
  height: 10px;
  border: 1px solid black;
  border-radius: 2px;
  padding: 1px;
  position: relative;
}

.battery-icon:after {
  content: '';
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 4px;
  background-color: black;
  border-radius: 0 2px 2px 0;
}

.battery-fill {
  height: 100%;
  background-color: black;
  border-radius: 1px;
}

/* 主要内容样式 */
.content {
  padding: 20px;
  position: relative;
  z-index: 2;
}

.back-button {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  margin-bottom: 40px;
}

.title h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
  color: #333;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.phone-input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  border: none;
  padding: 0 20px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  color: #333;
}

.phone-input::placeholder {
  color: #ccc;
}

.verify-button {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  border: none;
  background-color: #a9adb2;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.verify-button:hover {
  background-color: #9a9ea3;
}

.password-login {
  text-align: center;
  margin-top: 10px;
}

.password-login a {
  color: #6c7ee1;
  text-decoration: none;
  font-size: 14px;
}

/* 背景图案样式 */
.background-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 40%;
  z-index: 1;
  background-color: #e8e6ff;
  border-radius: 0 0 0 100px;
  overflow: hidden;
}

.handshake-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 70% 50%, rgba(255, 200, 255, 0.7), rgba(200, 200, 255, 0.5));
  background-size: cover;
}

.handshake-image:after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 60%, transparent 80%);
  border-radius: 50%;
}

@media (max-width: 480px) {
  .title h1 {
    font-size: 24px;
  }
  
  .background-image {
    width: 70%;
  }
}
</style>